<template>
    <!-- pages/mealpage/cancel/index.wxml -->
    <view class="details">
        <view class="msg flexbox-sb">
            <view class="centers">
                <image class="headimg" :src="info.userHeadPortrait"></image>
                <view class="name">{{ info.userNickName }}</view>
            </view>
            <view class="status-s">{{ info.userMobile }}</view>
        </view>
        <view class="mealbox">
            <view class="meal">套餐包含内容</view>
            <view :class="'flexbox-sb mt-20 servertype ' + (item.residualQuantity == 0 ? 'opacity' : '')" v-for="(item, index) in serverList" :key="index">
                <view class="servername" v-if="item.serviceName.length > 8">
                    <view>{{ item.serviceName }} x{{ item.residualQuantity > 0 ? item.residualQuantity : 0 + item.quantity > 0 ? item.quantity : 0 }}</view>
                    <view>(原价￥{{ item.originalPrice }}/次)</view>
                </view>

                <view class="servername" v-else>
                    {{ item.serviceName }} x{{ item.residualQuantity > 0 ? item.residualQuantity : 0 + item.quantity > 0 ? item.quantity : 0 }}（原价￥{{ item.originalPrice }}/次）
                </view>

                <view class="centers unsenter">
                    <view class="mr-10 item-ht">余{{ item.residualQuantity > 0 ? item.residualQuantity : 0 }}次</view>
                    <view class="centers unsenter">
                        <view class="sub" @tap="onSub" :data-index="index">-</view>
                        <view class="num">{{ item.usageTimes || 0 }}</view>
                        <view class="add" @tap="onAdd" :data-index="index">+</view>
                    </view>
                </view>
            </view>
            <view class="hr mt-20"></view>
            <view class="cancelmsg mt-30">核销说明</view>
            <view class="msg-text mt-20">1、选择用户服务的项目；</view>
            <view class="msg-text">2、选择要消耗的次数（不可大于剩余次数）；</view>
            <view class="msg-text">3、点击确认核销，即可核销完成；</view>
            <view class="msg-text">4、核销完成，对应项目可用次数将减少；</view>
            <view class="msg-text">5、已经使用完所有次数的项目不可再选中；</view>
            <view class="msg-text">6、核销完成后用户将会收到套餐包核销短信；</view>
        </view>
        <view class="btn" @tap="onCancel" v-if="info.status == 0">确定核销</view>
        <view class="btn1" v-if="info.status == 1">已全部核销</view>
        <view class="btn1" v-if="info.status == 2">已过期</view>
    </view>
</template>

<script>
// pages/mealpage/cancel/index.js
const app = getApp(); // 引入app

const _request = require('../../../utils/request.js'); // 引入require;

export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            id: '',
            serverList: [],
            // 服务
            info: {
                userHeadPortrait: '',
                userNickName: '',
                userMobile: '',
                status: 0
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.setData(
            {
                id: options.id
            },
            () => {
                this.getPackageBagInfoByStoreId();
            }
        );
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        // 门店查询套餐包详情
        getPackageBagInfoByStoreId() {
            const { id } = this;

            _request
                .get('/packageBag/getPackageBagInfoByStoreId', {
                    storeId: uni.getStorageSync('storeId'),
                    id
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        let data = res.data.data;
                        this.setData({
                            info: data,
                            serverList: data.services.map((item, index) => {
                                item.usageTimes = 0;
                                return item;
                            })
                        });
                    } else if (res.data.message === '此套餐包不属于您的店') {
                        uni.showToast({
                            title: res.data.message,
                            icon: 'none',
                            duration: 2000
                        });
                        setTimeout(() => {
                            uni.reLaunch({
                                url: '/firstpages/home/index'
                            });
                        }, 2000);
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 加减操作
        onSub(e) {
            this.setData({
                serverList: this.serverList.map((item, index) => {
                    if (index === e.currentTarget.dataset.index && item.usageTimes != 0) {
                        item.usageTimes = item.usageTimes - 1;
                    }

                    return item;
                })
            });
        },

        // 加减操作
        onAdd(e) {
            this.setData({
                serverList: this.serverList.map((item, index) => {
                    if (index === e.currentTarget.dataset.index && item.usageTimes < item.residualQuantity) {
                        item.usageTimes = item.usageTimes + 1;
                    }

                    return item;
                })
            });
        },

        // 核销
        onCancel() {
            let vm = this;
            const list = this.serverList.filter((v) => v.usageTimes > 0);

            if (list.length == 0) {
                uni.showToast({
                    title: '请选择核销内容',
                    icon: 'none',
                    duration: 1500
                });
            } else {
                uni.showModal({
                    cancelText: '取消',
                    confirmText: '确认',
                    content: '请确认是否对该用户购买的套餐包进行核销？',
                    success: (result) => {
                        if (result.confirm) {
                            _request
                                .postObj('/packageBag/writeOffPackageBag', {
                                    storeId: uni.getStorageSync('storeId'),
                                    id: this.info.id,
                                    //套餐包id
                                    service: list
                                })
                                .then((res) => {
                                    if (res.data.code == 200) {
                                        uni.showToast({
                                            title: '核销成功',
                                            icon: 'none',
                                            duration: 1000
                                        });
                                        setTimeout(() => {
                                            uni.reLaunch({
                                                url: '/pages/mealpage/mealsuccess/index?id=' + vm.info.id
                                            });
                                        }, 1000);
                                    }
                                })
                                .catch((error) => {
                                    console.log(error, 'error');
                                });
                        } else if (result.cancel) {
                        }
                    }
                });
            }
        }
    }
};
</script>
<style>
/* pages/mealpage/cancel/index.wxss */
.details {
    padding: 30rpx 20rpx;
}

.msg {
    height: 140rpx;
    background: #ffffff;
    box-shadow: 2px 2px 8px 0px rgba(236, 236, 236, 0.4);
    border-radius: 8px;
    margin-bottom: 20rpx;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
}

.headimg {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 20rpx;
}

.name {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 44rpx;
}

.status-s {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 80rpx;
    color: #333333;
}

.btn {
    height: 88rpx;
    background: #ff8722;
    border-radius: 44px;
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 88rpx;
    margin-top: 80rpx;
    text-align: center;
}

.mealbox {
    background: #ffffff;
    box-shadow: 2px 2px 8px 0px rgba(236, 236, 236, 0.4);
    border-radius: 8px;
    padding: 30rpx 20rpx;
}

.meal {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40rpx;
}

.servertype {
    /* height: 40rpx; */
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    /* line-height: 40rpx; */
}
.unsenter {
    align-items: baseline;
}
.item-ht {
    line-height: 16px;
    height: 16px;
}
.opacity {
    opacity: 0.5;
}

.sub,
.add {
    width: 26rpx;
    height: 26rpx;
    border: 1px solid #666666;
    line-height: 26rpx;
    text-align: center;
}

.num {
    margin: 0 10rpx;
    width: 36rpx;
    height: 26rpx;
    border: 1px solid #666666;
    line-height: 26rpx;
    text-align: center;
}

.cancelmsg {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40rpx;
}

.msg-text {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 40rpx;
}

.btn1 {
    height: 88rpx;
    border-radius: 44px;
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 88rpx;
    margin-top: 80rpx;
    text-align: center;
    background-color: #666;
}

.hr {
    width: 100%;
    height: 1rpx;
    border-bottom: 2rpx solid #f1f1f1;
}
.servername {
    max-width: 240px;
    word-wrap: break-word;
    line-height: 1.6;
}
</style>
